<template>
  <div class="container">
    <div class="container" :id="id"></div>
  </div>
</template>
<script>
export default {
  props: {
    heatData: {
      type: Array,
      default: function () {
        return [
          // {
          //     "lng": 116.191031,
          //     "lat": 39.988585,
          //     "count": 10
          // },
        ];
      },
    },
  },
  watch: {
    heatData() {
      console.log("heatData", this.heatData);
      this.setHeatData();
    },
  },
  data() {
    return {
      id: "actReportMap_" + Math.random(),
      map: null,
      heatmap: null
    };
  },
  methods: {
    init() {
      return new Promise((resolve, reject) => {
        this.map = new AMap.Map(this.id, {
          zoom: 11, //级别
          center: [116.397428, 39.90923],
          zoomEnable: true,
          // center: [121.498586, 31.239637]
        });

        this.map.on("complete", () => {
          // 地图图块加载完成后触发
          this.$emit("complete");
          this.setHeatData();
          resolve();
        });
      });
    },
    setHeatData() {
      this.map.plugin(["AMap.Heatmap"], () => {
        if (!this.heatmap) {
          this.heatmap = new AMap.Heatmap(this.map, {
            radius: 25, //给定半径
            opacity: [0, 0.8],
          
          });
        } 
        
        //设置数据集：该数据为北京部分“公园”数据
        this.heatmap.setDataSet({
          data: this.heatData,
          max: 100,
        });
        // if (this.heatData.length > 0) {
        //   this.map.setZoomAndCenter(17, [this.heatData[0].lng, this.heatData[0].lat]);
        // }
        
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.container {
  height: 100%;
  width: 100%;
}
</style>